{% extends 'base/base.html' %}

{% block title %}
    查询套餐
{% endblock %}

{% block main %}
    <div class="row">
        {% for combo in combos %}
        <div class="col-sm-6 col-lg-4" style="margin-bottom:16px;">
            <div class="card plan-card border-0 shadow-sm">
                <div class="card-body text-center">
                    <h4 class="text-primary" style="margin-top:0;">{{ combo.name }}</h4>
                    <p class="text-muted small">{{ combo.info }}</p>
                    <div class="plan-price">¥{{ combo.price }}<small class="text-muted">/月</small></div>
                    <div class="row" style="margin-top:10px;">
                        <div class="col-xs-4">
                            <h5 class="text-info">{{ combo.traffic }}MB</h5>
                            <small class="text-muted">流量</small>
                        </div>
                        <div class="col-xs-4">
                            <h5 class="text-warning">{{ combo.talk_time }}分钟</h5>
                            <small class="text-muted">语音</small>
                        </div>
                        <div class="col-xs-4">
                            <h5 class="text-danger">{{ combo.message }}条</h5>
                            <small class="text-muted">短信</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>

{% endblock %}